<template>
  <div class="expertDetail-root" v-loading="expertDetail==null">
    <template v-if="expertDetail!=null">
      <div class="expert-head" @click="bigPic">
        <img v-if="expertDetail.photoPath" width="100%" height="100%" :src="picPreUrl + expertDetail.photoPath">
      </div>
      <div class="export-secrcribe">{{expertDetail.secrcribe}}</div>
    </template>


  </div>
</template>

<script>
  import { reactive, toRefs, onMounted, ref, watch, computed } from '@vue/composition-api'
  import { expertDetail } from '@/api/industry/gpm'
  import { getPicUrl } from '@/api/industry/file'
  import { larkViewer } from 'lark-common'

  export default {
    name: 'expertDetail',
    props: {
      expertId: {
        type: [String, Number],
        default: null
      }
    },
    setup(props, content) {
      let data = reactive({
        expertDetail: null,
        picPreUrl: getPicUrl + '/'
      })
      watch(() => props.expertId, () => {
        loadExpertData()
      })
      const loadExpertData = async() => {
        if (props.expertId != null) {
          let response = await expertDetail(props.expertId)
          data.expertDetail = response.data
        }
      }
      const bigPic = () => {
        larkViewer([{ src: data.picPreUrl + data.expertDetail.photoPath }])
      }
      onMounted(() => {
        loadExpertData()
      })
      return { ...toRefs(data), bigPic }
    }
  }
</script>

<style scoped lang="scss">
  .expertDetail-root {

    .expert-head {
      float: left;
      width: 180px;
      height: 200px;
      margin-right: 10px;
    }

    .export-secrcribe {
      line-height: 180%;
      text-indent: 2em;
    }
  }
</style>
